<template>
  <div>
    <van-nav-bar class="app-nav-bar" style="background-color: #5babfb;color: white" title="登录/注册" />
    <van-cell-group title="登录信息">
      <van-form @submit="onSubmit" style="background-color: #f7f8fa">
        <van-field
          v-model="User.number"
          name="uid"
          label="用户学号"
          placeholder="用户学号"
          type="number"
          :rules="[{ required: true, message: '请填写用户学号' }]"
        />
        <van-field
          v-model="User.password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-cell title-style="text-align:left;" title="记住密码">
          <template #default>
            <van-switch v-model="rem" size="20" />
          </template>
        </van-cell>

        <div style="margin-top: 20px">
          <van-button round style="width: 80%; margin: 9%" type="info" native-type="submit"> 登录 </van-button>
        </div>
      </van-form>
    </van-cell-group>
  </div>
</template>

<script>
// import { login } from '@/api/user'
export default {
  name: 'Login',
  created() {
    this.readInfo()
  },
  data() {
    return {
      User: {
        number: '',
        password: ''
      },
      rem: true
    }
  },
  methods: {
    async onSubmit() {
      const data = await this.$api.user.login(this.User)
      console.log(data)
      this.$store.commit('SET_UID', data.data.uid)
      this.$store.commit('SET_USERTOKEN', data.data.token)

      // history.go(0)
      this.$router.push('/')
      //   this.
    },
    // 查询vuex中是否保存密码
    readInfo() {
      const r = this.$store.state.rem
      // 是否记住密码，记住则读取
      if (r) {
        this.User = this.$store.state.info
        this.rem = true
      }
    }
  }
}
</script>

<style scoped>
</style>
